<template>
	<view class="">
			<view class="u-flex u-f-jsb pt24 pb24 p12" style="background: #19291C;">
				<view style="background: rgba(255,255,255,0.1);color: #C7F3D0;" class="brs8 u-flex mr5 p6 h54 u-f1 u-f-justify u-font-bold fz20" @click="toPage('/pages/community/my')">
					1350
				</view>
				<view style="background: rgba(255,255,255,0.1)" class="fz14 brs8 u-flex ml5 p6 h54 u-f1 u-f-justify c255">
					积分明细<u-icon name="arrow-right" class="ml4"></u-icon>
				</view>
			</view>
	<view class="p12">
		<view class="mb40">
			<view class="u-flex u-f-jsb mb20" @click="toPage('/pages/point/draw')">
				<span class="u-font-bold fz14">积分抽奖</span>
				<span class="u-flex fz12 c6" >
					抽奖记录
					<u-icon name="arrow-right"></u-icon>
				</span>
			</view>
			<view class="btn-chou fz14 u-font-bold c255 u-flex u-f-justify">10积分抽一次</view>
		</view>
		<view class="u-font-bold fz14 mb12">积分兑换</view>
		<u-waterfall v-model="flowList" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view @click="toProduct(item)" class="demo-warter pr6" v-for="(item, index) in leftList" :key="index">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.picUrl" :index="index"></u-lazy-load>
					<view class="pt10 pb16">
						<view class="fz14 u-font-bold u-line-2">{{item.name}}</view>
						<view class="u-flex u-f-jsb mt10">
							<view class="u-flex fz12 c9">
								<span class="fz14 u-font-bold" style="color: #70B52C;">{{item.point}}</span>积分<span v-if="item.price">+<span class="fz14 u-font-bold" style="color: #70B52C;">{{item.price}}</span>元</span>
							</view>
							<view class="u-flex fz12 c9">
								库存：{{item.stock}}
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view @click="toProduct(item)" class="demo-warter pr6" v-for="(item, index) in leftList" :key="index">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.picUrl" :index="index"></u-lazy-load>
					<view class="pt10 pb16">
						<view class="fz14 u-font-bold u-line-2">{{item.name}}</view>
						<view class="u-flex u-f-jsb mt10">
							<view class="u-flex fz12 c9">
								<span class="fz14 u-font-bold" style="color: #70B52C;">{{item.point}}</span>积分<span v-if="item.price">+<span class="fz14 u-font-bold" style="color: #70B52C;">{{item.price}}</span>元</span>
							</view>
							<view class="u-flex fz12 c9">
								库存：{{item.stock}}
							</view>
						</view>
					</view>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
		
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curTab: 1,
				loadStatus: 'loadmore',
				flowList: [],
				list: []
			}
		},
		onLoad() {
			this.initData();

		},
		
		// 页面下拉到底部触发
		onReachBottom() {
			if (this.loadStatus == 'more') {
				this.getData()
			}
		},
		methods: {
			toInfo(item) {
				uni.navigateTo({
					url: '/pages/point/info?id=' + item.id
				})
			},

			toProduct(item) {
				uni.navigateTo({
					url: '/pages/product/info?id=' + item.id
				})
			},

			initData() {
				this.page = 1
				this.flowList = []
				this.getData()

			},
			getData() {
				this.$api.productSearch({
					pageNo: this.page,
					pageSize: 10,
					categoryId: 24
				}, res => {
					if (res.code == 200) {
						let _list = res.data.list
						this.flowList = [...this.flowList, ..._list]
						// 判断所有数据是否请求完毕
						if (res.data.total > this.flowList.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					}
				})
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			}
		
		}
	}
</script>

<style>
</style>

<style lang="scss" scoped>
.user-info{
	width: 232rpx;
	background: rgba(25,41,28,0.05);
}
.module-search{
	flex: 1;
	background: rgba(25,41,28,0.05);
}
.btn-chou{
	width: 520rpx;
	height: 96rpx;
	line-height: 96rpx;
	margin: 0 auto;
	background: #70B52C;
	border-radius: 16rpx ;
}
</style>